<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
    <title>投资游戏</title>
    <!-- 引入样式文件 整体以淡白色为主
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css">
  -->
    <link rel="stylesheet" href="./css/index.css">
    <style>
        body {
            background-color: #fff;
        }
		.abc1 {
			color: #f00; 
		}
		.abc2 {
			color: #00ff1c;
		}
    </style>
</head>

<body>
    <div id="app">
        <!-- 
	<van-cell-group inset>
	  <van-cell title="单元格" value="内容">aaa</van-cell>
	  <van-cell title="单元格" value="内容" label="描述信息">bbb</van-cell>
	</van-cell-group>
	-->
        <van-cell-group>
            <van-cell>
                <van-row type="flex" justify="center">
                    <van-col span="24">
                        <div align="center">
                            <!--<strong><h1>投资游戏</h1></strong>-->
                        </div>
                    </van-col>
                </van-row>
                <van-row>
                    <van-col span="12" align="center">
                        <h3>
							<!-- v-bind:class="[ isAbc1 ? abc1s : abc2s ]" -->
                            今日涨跌 <strong v-bind:class="udColors">{{ zhangdie }}</strong>
                        </h3>
                    </van-col>

                    <van-col span="12" align="right">

                        <!-- <van-button v-show="ks" type="primary" @click="start">开始</van-button> -->
						<van-button v-show="ks" @click="start">开始</van-button>
                        <van-button v-show="xyr" @click="nextDay">下一日</van-button>
                        <van-button v-show="js" @click="end1">结束</van-button>

                    </van-col>
                </van-row>
                <van-row>
                    <van-col span="24" align="center">
                        当前日期： {{ curDateStr }}<!-- 1月1日 -->
                    </van-col>
                </van-row>
            </van-cell>
            <hr>
            <van-cell>
                <van-row> 
                    <van-col span="12">上涨 {{ shangZhangNum }}</van-col>
                    <van-col span="12">下跌 {{ xiaDieNum }}</van-col>
                </van-row>
                <br>
                <van-row>
                </van-row>
                <van-row>
                    <van-col span="12">今日盈亏额 {{ todayZD }}</van-col>
                    <van-col span="12">总资金 {{ totalCash }}</van-col>
                </van-row>
            </van-cell>

            <van-cell v-show="startShow1">
                <van-tabs v-model="active">
                    <van-tab title="持有基金">
                        <!-- 持有基金 
| +-------------------------------------
| |	基金名称	今日价格	涨跌率	
| +-------------------------------------
-->
                        <van-row>
                            <van-col span="8">基金名称</van-col>
                            <van-col span="8">今日价格</van-col>
                            <van-col span="8">涨跌率</van-col>
                        </van-row>
                        <van-row v-for="item in showJJList1">
                            <van-col span="8" @click="click1(item.jjName)">{{ item.jjName }}</van-col>
                            <van-col span="8">{{ item.todayPrice }}</van-col>
                            <van-col span="8">{{ item.UpDownRate }}</van-col>
                            <hr>
                        </van-row>
                    </van-tab>
                    <van-tab title="行情分析">行情分析</van-tab>
                </van-tabs>
            </van-cell>
            <!-- 
	<van-cell>		
		<van-row>
		  <van-col span="8">span: 8</van-col>
		  <van-col span="8">span: 8</van-col>
		  <van-col span="8">span: 8</van-col>
		</van-row>

		<van-row>
		  <van-col span="4">span: 4</van-col>
		  <van-col span="10" offset="4">offset: 4, span: 10</van-col>
		</van-row>

		<van-row>
		  <van-col offset="12" span="12">offset: 12, span: 12</van-col>
		</van-row>
	</van-cell>
	-->
        </van-cell-group>
		
        <van-tabbar v-show="startShow1" v-model="subActive" @change="onChange">
            <van-tabbar-item icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item icon="search">基金</van-tabbar-item>
            <van-tabbar-item icon="friends-o">买卖</van-tabbar-item>
            <van-tabbar-item icon="setting-o">消息</van-tabbar-item>
            <van-tabbar-item icon="manager-o">我的</van-tabbar-item>
        </van-tabbar>

        <van-popup v-model="showDailog">
            aabbcc
        </van-popup>

    </div>
</body>
<!-- 引入 Vue, AXIOS和 Vant 的 JS 文件 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.4/axios.js"></script>
-->
<script src="./js/vue.min.js"></script>
<script src="./js/vant.min.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/pouchdb-8.0.1.min.js"></script>

<script src="./main.js"></script>
<script src="./test.js"></script>
<script src="./utils.js"></script>
<script type="text/javascript">
    console.log("start gpjj");
    //import { Notify } from 'vant';

    var main1, utils;
    var gpList1;

    new Vue({
        el: '#app',
        data() {
            return {
                msg: 'abc',
                xyr: false,
                ks: true,
                js: false,
                curNum: 1,
				myInfo:{},
				shangZhangNum:0,
				xiaDieNum:0,
                zhangdie: '未开始',
                active: 0,
				startShow1: false,
				curDateStr: '',
				todayZD: '',
				isAbc1: true,
				abc1s: 'abc1',
				abc2s: 'abc2',
				udColors: 'abc1',
                subActive: 0,
				totalCash: 0,
                showJJList: [{
                    id: 1,
                    jjName: '酒类ETF',
                    todayPrice: '0.5555',
                    UpDownRate: '+1.1%',
                }, {
                    id: 2,
                    jjName: '新能源ETF',
                    todayPrice: '0.6666',
                    UpDownRate: '-1.2%',
                }, {
                    id: 3,
                    jjName: '光伏ETF',
                    todayPrice: '0.7777',
                    UpDownRate: '-0.6%',
                }, ],
                showJJList1: [],
                showDailog: false
            };
        },
        created: function() {
            console.log("created");
			
            this.initData();
			this.initMyInfo();
        },
		mounted: function(){
			console.log("mounted")
		},
        methods: {
			initMyInfo(){
				console.log("initMyInfo()");
				let myInfo1 = localStorage.getItem("myInfo");
				if(myInfo1===null || myInfo1 === undefined){
					console.log("myInfo1=null");
				}else{
					console.log("myInfo1-=>",myInfo1);
					this.myInfo = JSON.parse(myInfo1);
				}
				
				
			},
            initData() {//初始化数据
                console.log("gpIndex initData");
				
				//判断是否有中断的游戏
				var initFlage = localStorage.getItem("initFlage");
				console.log("initFlage-=>", initFlage);
				var days = localStorage.getItem("today");		
				console.log("days-=>", days);
				
				if(initFlage == 1 && days != null){
					//显示当前的基金数据
					utils = new Utils();
					this.showData();
				}else{
					//判断是否开始新的游戏
					
					main1 = new Main();
					//var abc = new Abc();
					utils = new Utils();
				}
				
				
				
            },
			showData(){//显示当前的基金数据
				console.log("showData()"); 
				
                this.xyr = true;
                this.ks = false;
                this.js = true;
				
				//显示今日涨跌
				this.showTodayZD();
				
				//显示今日日期
				this.showTodyDate();
				
				//显示上涨和下跌数
				this.showUpDown();
				
				//显示总资金
				this.showTotalDash();
				
				//显示今日的盈亏数额。
				this.showTodayUpDownAmount();
				
				this.showJJList1 = utils.getTodayJJData();
				this.startShow1 = true;
			},
            start(){ //开始
                console.log("start()");
				
				localStorage.setItem("today", 1);
				localStorage.setItem("initFlage", -1);
				
				//utils.initData();
				console.log("utils.initData1()-=>",
					utils.initData1()
				);
                this.xyr = true;
                this.ks = false;
                this.js = true;
				
				//显示今日涨跌
				this.showTodayZD();

				//显示今日日期
				this.showTodyDate();
				
				//显示上涨和下跌数
				this.showUpDown();
				
				//显示总资金
				this.showTotalDash();
				
				//显示今日的盈亏数额。
				this.showTodayUpDownAmount();

				this.showJJList1 = utils.getJJData();
				this.startShow1 = true;
				
				this.myInfo['totalCost'] = 100000
				this.myInfo['lastCost'] = 100000
				
                
				localStorage.setItem("myInfo",JSON.stringify(this.myInfo))
				
            },
			showTodayUpDownAmount(){//显示今日的盈亏数额。
				console.log("showTodayUpDownAmount()");
				/*
				console.log("utils.getTodayUpDownAmount()-=>",
					utils.getTodayUpDownAmount()
				);
				*/
				var val1 = utils.getTodayUpDownAmount();
				var str1 = '';
				if(val1===0){
					str1 = '0.00%';
				}else{
					val1 = parseFloat(val1).toFixed(4);
					val1 = val1 * 100;
					str1 = ''+val1.toFixed(2)+'%'
				}
				
				this.todayZD = str1;
			},
			showTotalDash(){//显示总资金
				console.log("showTotalDash()");
				/*
				console.log("utils.getTotalDash()-=>",
					utils.getTotalDash()
				);
				*/
				this.totalCash = utils.getTotalDash();
			},
			showUpDown(){//显示上涨和下跌数
				console.log("showUpDown()");
				/*
				console.log("utils.getUpAndDwonNum()-=>",
					utils.getUpAndDwonNum()
				);
				*/
				var arr1s = utils.getUpAndDwonNum();
				this.shangZhangNum = arr1s[0];
				this.xiaDieNum = arr1s[1];
			},
			showTodyDate(){//显示今日日期
				console.log("showTodyDate()");
				/*
				console.log("utils.getCurDays()-=>",
					utils.getCurDays()
				);
				*/
				this.curDateStr = utils.getCurDays();
			},
			showTodayZD(){//显示今日涨跌
				console.log("showTodayZD()");
				
				/*
				console.log("Utils.getUpAndDownValue()-=>",
					utils.getUpAndDownValue()
				);
				*/
				this.zhangdie = utils.getUpAndDownValue();
			
			},
            nextDay(){
                console.log("nextDay()");

				//刷新今日的最新基金数据
				this.updateNextValue();
				
				//显示当前日期
				this.showTodyDate();
				
				//显示当天涨跌
				this.showTodayZD();
				
				//显示上涨下跌数
				this.showUpDown();
				
				//显示总金额
				this.showTotalDash();
				
				//计算今日盈亏
				this.showTodayUpDownAmount();
				
				//刷新页面基金的数据 
				this.updateJJlist1();
				
            },
			updateJJlist1(){//刷新页面基金的数据 
				console.log("updateJJlist1()");
				
				this.showJJList1 = utils.getJJData();
			},
			updateNextValue(){//刷新今日的最新基金数据
				console.log("updateNextValue()");
				console.log("utils.updateNextDayValue()-=>",
					utils.updateNextDayValue()
				);
			},
            end1(){
                console.log("end1()");
				
				localStorage.setItem("initFlage", -1);
				
                this.xyr = false;
                this.ks = true;
                this.js = false;
				this.startShow1 = false; 
				
				this.todayZD = '';
				this.zhangdie = '未开始';
				this.shangZhangNum = 0;
				this.xiaDieNum = 0;
				this.curDateStr = '';
				this.totalCash = 0;
				window.location.href = 'gpIndex.html';
            },
            click1(e) {
                console.log("click1()", e);

                //console.log(this.showJJList1);

                for (let tmpa1 of this.showJJList1) {
                    if (tmpa1.jjName === e) {
                        console.log("tmpa1-=>",JSON.stringify(tmpa1));
                    }
                }

                var tmpData2 = localStorage.getItem(e);
                //console.log("tmpData2-=>",JSON.stringify(tmpData2));
                this.showjj(e);
            },
            showjj(e){
                console.log("showjj-=>",e);
                //this.showDailog = true;
                //location.href = '';
                //location.replace('');
                sessionStorage.setItem("baseName1",e);
                location.href = './baseInfo.html';
            },
            onChange(index) {
                vant.Toast('提示:' + index);
                //vant.Notify({type:'primary',message:index});
                console.log("index-=>", index);
                if (index === 0) {
                    window.location.href = 'gpIndex.html';
                } else if (index === 1) {
                    window.location.href = 'alljjList.html';
                } else if (index === 2) {
                    window.location.href = 'buySell.html';
                } else if (index === 3) {
                    window.location.href = 'msgNotify.html';
                } else if (index === 4) {
                    window.location.href = 'myInfo.html';
                }
            },
        }
    });

    (function() {
        console.log("step2");
		var taa1 = 'aabbcc';
		taa1 = taa1.split('').reverse().join('');
		console.log("taa1-=>",taa1);
    })();
	
/*
	let aa1 = '';
	aa1 = aa1.split('').reverse().join('')
	
*/	
</script>

</html>